/***
 * 折线图
 * 
 * ***/

import { nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, reactive, ref } from "vue";
import * as echarts from 'echarts'
import { init, EChartsOption } from 'echarts'
import resize from "@/utils/resize";
import { grid, fontSize } from "./chartsData"
const {
  chart,
  beforeDestroy,
  activated,
  deactivated
} = resize()
export interface propData {
  name: string,
  color: string,
  data: number[]
}

export default function () {
  // 基础折线图，中间带圆点
  async function linelist(id: string, xData: string[], xName: string, yName: string, data: number[]) {
    nextTick(() => {
      initChart(
        id,
        xData,
        xName,
        yName,
        data,
      )
    })
  }

  function initChart
    (id: string,
      xData: string[],
      yName = '',
      xName = '',
      data: any,
    ) {
    const option = {
      grid: {
        left: grid.left,
        top: grid.top,
        right: grid.right,
        bottom: grid.bottom,
        containLabel: true
      },
      xAxis: {
        data: xData,
        splitLine: {
          show: false
        },
        axisLabel: {
          textStyle: {
            fontSize: fontSize.fontSizex,
            // color: 'rgba(0, 0, 0, 255)';
            color: '#ffffff'
          },
          interval: 0,
        },
      },
      yAxis: {
        axisLabel: {
          textStyle: {
            fontSize: fontSize.fontSizey,
            color: '#ffffff'
          }
        },
        splitLine: {
          show: false
        },
        type: "value",
        min: 0,
        max: 50,
        interval: 10,
      },
      series: [{
        type: 'line',
        stack: 'Total',
        itemStyle: {
          color: '#4AC8FF'
        },
        data: data
      }]
    };




    setTimeout(() => {
      const barChart = init(document.getElementById(id) as HTMLDivElement)

      barChart.setOption(option as EChartsOption)
      window.addEventListener('resize', () => {
        barChart.resize()
      })
    }, 500)


  }


  let colorArr = []


  // 平滑折线图
  async function smoothLineChart(id: string, xData: string[], xName: string, yName: string, data: propData[]) {
    nextTick(() => {
      smoothChart(
        id,
        xData,
        xName,
        yName,
        data,
      )
    })
  }

  function smoothChart
    (id: string,
      xData: string[],
      yName = '',
      xName = '',
      data: any,
    ) {

    let yAxisArr = []
    for (let i = 0; i < data.length; i++) {
      yAxisArr.push({
        name: data[i].name,
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1
          }
        },
        itemStyle: {
          normal: {
            color: data[i].color,
            borderWidth: 12
          }
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: data[i].color
            },
            {
              offset: 1,
              color: 'rgba(255, 255, 255,0)'
            }
          ])
        },
        data: data[i].data
      })
    }



    const option = {
      legend: {
        icon: 'rect',
        itemWidth: 16,
        itemHeight: 8,
        itemGap: 13,
        right: '4%',
        textStyle: {
          fontSize: 10,
          color: '#fff' // 或其他适配主题的颜色
        }
      },
      grid: {
        // left:0,
        left: 20,
        top: grid.top,
        right: grid.right,
        bottom: grid.bottom,
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          lineStyle: {
            color: '#57617B'
          }
        }
      },
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 1)'
          },
        },

        axisLabel: {
          textStyle: {
            fontSize: fontSize.fontSizex,
            color: '#fff'
          },
          rotate: 65,
          interval: 0,
          // position:'outside'
        },


        data: xData
      }],
      yAxis: [{
        type: 'value',
        axisTick: {
          show: false
        },
        // axisLine: {
        //     lineStyle: {
        //         color: 'rgba(1, 1, 1, 1)'
        //     }
        // },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: fontSize.fontSizey,
            color: "#fff"
          }
        },

        splitLine: {
          // show:false,
          lineStyle: {
            type: "dotted",
            color: 'rgba(255, 255, 255, 1)'
          }
        }
      }],
      series: yAxisArr
    };

    setTimeout(() => {
      const barChart = init(document.getElementById(id) as HTMLDivElement)

      barChart.setOption(option as EChartsOption)
      window.addEventListener('resize', () => {
        barChart.resize()
      })
    }, 500)


  }

  return {

    linelist,
    smoothLineChart
  }
}
onBeforeUnmount(() => {
  beforeDestroy()
})

onActivated(() => {
  activated()
})

onDeactivated(() => {
  deactivated()
})



